import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Select, Input, Checkbox, message, Spin } from 'antd';
import styles from './index.less';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
const plainOptions = [
  '首页',
  '机器人总览',
  '机器人管理',
  '接口管理',
  '对话工坊',
  '通用配置',
  '机器人设置',
  '知识总览',
  '实体管理',
  '协作开发',
  '知识库分享',
  '词槽管理',
  '部署配置',
  '版本维护',
  '知识库管理',
];
// const plainOptions = [];
const defaultCheckedList = ['首页', '机器人总览'];

class AddEditUser extends Component {
  state = {
    checkedList: defaultCheckedList,
    indeterminate: false,
    checkAll: false,
    login: false,
    sysList: [],
    tca: false,
    tcb: false,
    tcc: false,
  };

  componentDidMount() {
    const { dispatch, sysList } = this.props;

    this.sysgetMenus();
    console.log(sysList);
    let a = [];
    sysList.map(item => {
      if (
        item !== '系统管理' &&
        item !== '用户管理' &&
        item !== '角色管理' &&
        item !== '权限管理'
      ) {
        a.push(item);
      }
    });
    console.log(a);
    this.setState({ plainOptions: a });
  }

  unique10 = arr => {
    return Array.from(new Set(arr));
  };

  // 多选框
  onChangeCheckbox = checkedList => {
    setTimeout(() => {
      const { tca } = this.state;
      const { plainOptions } = this.state;
      switch (tca) {
        case '机器人管理':
          let b = checkedList.filter(item => {
            return item !== '机器人设置' && item !== '协作开发' && item !== '部署配置';
          });
          let a = this.unique10(b);
          this.setState({
            checkedList: a,
            indeterminate: !!a.length && a.length < plainOptions.length,
            checkAll: a.length === plainOptions.length,
            tca: false
          });
          break;
        case '知识库管理':
          let bb = checkedList.filter(item => {
            return item !== '知识总览' && item !== '知识库分享' && item !== '版本维护';
          });
          let aa = this.unique10(bb);

          this.setState({
            checkedList: aa,
            indeterminate: !!aa.length && aa.length < plainOptions.length,
            checkAll: aa.length === plainOptions.length,
            tca: false
          });
          break;
        case '通用配置':
          let topa = checkedList.filter(item => {
            return item !== '实体管理' && item !== '词槽管理' && item !== '接口管理';
          });
          let topb = this.unique10(topa);

          this.setState({
            checkedList: topb,
            indeterminate: !!topb.length && topb.length < plainOptions.length,
            checkAll: topb.length === plainOptions.length,
            tca: false
          });
          break;
        case '运营分析':
          let topaY = checkedList.filter(item => {
            return item !== '机器人总览分析' && item !== '接口调用情况分析' && item !== '对话流程分析'
            && item !== '知识点数量分析' && item !== '多轮对话总体情况分析' && item !== '多轮对话失败原因分析' 
            && item !== '问答任务情况分析' && item !== '未知问题分析' && item !== '未知问题知识点聚合分析';
          });
          let topbY = this.unique10(topaY);

          this.setState({
            checkedList: topbY,
            indeterminate: !!topbY.length && topbY.length < plainOptions.length,
            checkAll: topbY.length === plainOptions.length,
            tca: false
          });
          break;
        default:
          checkedList.map(item => {
            if (item === '机器人设置' || item === '协作开发' || item === '部署配置') {
              checkedList.push('机器人管理');
            }
            if (item === '知识总览' || item === '知识库分享' || item === '版本维护') {
              checkedList.push('知识库管理');
            }
            if (item === '实体管理' || item === '词槽管理' || item === '接口管理') {
              checkedList.push('通用配置');
            }
            if(item === '机器人总览分析' || item === '接口调用情况分析' || item === '对话流程分析'
            || item === '知识点数量分析' || item === '多轮对话总体情况分析' || item === '多轮对话失败原因分析' 
            || item === '问答任务情况分析' || item === '未知问题分析' || item === '未知问题知识点聚合分析'){
              checkedList.push('运营分析');
            }
          });
          let aaa = this.unique10(checkedList);

          this.setState({
            checkedList: aaa,
            indeterminate: !!aaa.length && aaa.length < plainOptions.length,
            checkAll: aaa.length === plainOptions.length,
            tca: false
          });
          break;
      }
    }, 500);
  };

  onCheckAllChange = e => {
    const { plainOptions } = this.state;
    console.log(e.target.checked);
    this.setState({
      checkedList: e.target.checked ? plainOptions : ['首页', '机器人总览'],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  onCheckAllChangea = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      checkedList.push('机器人设置');
      checkedList.push('协作开发');
      checkedList.push('部署配置');
      let a = this.unique10(checkedList);
      this.setState({
        tca: '1',
      });
    } else {
      this.setState({
        tca: '机器人管理',
      });
    }
  };

  onCheckAllChangeb = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      checkedList.push('知识总览');
      checkedList.push('知识库分享');
      checkedList.push('版本维护');
      let a = this.unique10(checkedList);
      this.setState({
        tca: '1',
      });
    } else {
      this.setState({
        tca: '知识库管理',
      });
    }
  };

  onCheckAllChangeA = e => {
    const { checkedList } = this.state;
    if (e.target.checked) {
      checkedList.push('机器人总览分析');
      checkedList.push('接口调用情况分析');
      checkedList.push('对话流程分析');
      checkedList.push('知识点数量分析');
      checkedList.push('多轮对话总体情况分析');
      checkedList.push('多轮对话失败原因分析');
      checkedList.push('问答任务情况分析');
      checkedList.push('未知问题分析');
      checkedList.push('未知问题知识点聚合分析');
      let a = this.unique10(checkedList);
      this.setState({
        tca: '1',
      });
    } else {
      this.setState({
        tca: '运营分析',
      });
    }
  }

  onCheckAllChangec = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      checkedList.push('实体管理');
      checkedList.push('词槽管理');
      checkedList.push('接口管理');
      let a = this.unique10(checkedList);
      this.setState({
        tca: '1',
      });
    } else {
      this.setState({
        tca: '通用配置',
      });
    }
  };

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法
    // let user  = this.userInfo()
    // console.log(user)
  };

  sysgetMenus = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'teamWord/sysgetMenus',
        payload: {},
        callback: res => {
          console.log('菜单列表', res);
        },
      });
    });
  };

  // 保存
  operation = () => {
    let user = this.userInfo();
    const { checkedList } = this.state;
    console.log(user);
    if (user.wordName !== '') {
      if (checkedList.length) {
        this.setState({ login: true });
        const { dispatch, currentUser } = this.props;
        const collaborativeDevelopmentEntity = {
          userId: currentUser.uid,
          robotId: currentUser.robotId,
          userName: user.wordName,
          menuIds: checkedList,
          cooperationId: user.wordName,
        };
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'teamWord/collaboraSavecoll',
            payload: collaborativeDevelopmentEntity,
            callback: res => {
              console.log('添加协作开发用户', res);
              if (!res.code) {
                message.success('添加成功');
                this.props.feel('false');
              }
              this.setState({ login: false });
            },
          });
        });
      } else {
        message.error('请至少选中一项分享功能');
      }
    }
  };

  panduan = val => {
    // console.log(val);
    const { plainOptions } = this.state;
    let a = plainOptions === undefined ? [] : plainOptions;
    let res = a.some(item => {
      return item === val;
      //  if(item===val){
      //   //  return false
      //    console.log('不禁用',val)
      //  }else{
      //   console.log('禁用',val)
      //  }
    });
    return !res;
    // console.log(res)
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    // 多选框参数
    return (
      <div>
        <Spin spinning={this.state.login}>
          <div className={styles.der}>
            <Form className="zdyfroma" layout="horizontal">
              <FormItem label="用户账号" className={styles.wardfrom}>
                {getFieldDecorator('wordName', {
                  initialValue: ``,
                  rules: [{ required: true, message: '用户账号不能为空！' }],
                })(<Input placeholder="请输入用户账号" />)}
              </FormItem>
              <FormItem label="分享功能" className={styles.wardfrom}>
                <Row gutter={20}>
                  <Col span={3}>
                    <Checkbox
                      indeterminate={this.state.indeterminate}
                      onChange={this.onCheckAllChange}
                      checked={this.state.checkAll}
                    >
                      全选
                    </Checkbox>
                  </Col>
                  <Col className="zdyCheckBox" span={21}>
                    <CheckboxGroup
                      // options={plainOptions}
                      value={this.state.checkedList}
                      onChange={this.onChangeCheckbox}
                      style={{ width: '100%' }}
                    >
                      <Row>
                        <Col span={2}>
                          <Checkbox disabled value="首页">
                            首页
                          </Checkbox>
                        </Col>
                        <Col span={3}>
                          <Checkbox disabled value="机器人总览">
                            机器人总览
                          </Checkbox>
                        </Col>
                        <Col span={19}>
                          <Row
                            style={{ marginBottom: 20 }} // position: 'relative', left: '30px',
                            gutter={20}
                          >
                            <Col span={5}>
                              <Checkbox
                                onChange={this.onCheckAllChangea}
                                disabled={this.panduan('机器人管理')}
                                value="机器人管理"
                              >
                                机器人管理
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox
                                onChange={this.onCheckAllChangeb}
                                disabled={this.panduan('知识库管理')}
                                value="知识库管理"
                              >
                                知识库管理
                              </Checkbox>
                            </Col>
                            <Col span={4} style={{ padding: 0 }}>
                              <Checkbox disabled={this.panduan('对话工坊')} value="对话工坊">
                                对话工坊
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox onChange={this.onCheckAllChangec} disabled={this.panduan('通用配置')} value="通用配置">
                                通用配置
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox onChange={this.onCheckAllChangeA} disabled={this.panduan('运营分析')} value="运营分析">
                                运营分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('机器人设置')} value="机器人设置">
                                机器人设置
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('知识总览')} value="知识总览">
                                知识总览
                              </Checkbox>
                            </Col>
                            <Col span={4} style={{ padding: 0 }} />
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('实体管理')} value="实体管理">
                                实体管理
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('机器人总览分析')} value="机器人总览分析">
                                机器人总览分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('协作开发')} value="协作开发">
                                协作开发
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('知识库分享')} value="知识库分享">
                                知识库分享
                              </Checkbox>
                            </Col>
                            <Col span={4} style={{ padding: 0 }} />
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('词槽管理')} value="词槽管理">
                                词槽管理
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('接口调用情况分析')} value="接口调用情况分析">
                                接口调用情况分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('部署配置')} value="部署配置">
                                部署配置
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('版本维护')} value="版本维护">
                                版本维护
                              </Checkbox>
                            </Col>
                            <Col span={4} style={{ padding: 0 }} />
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('接口管理')} value="接口管理">
                                接口管理
                              </Checkbox>
                            </Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('对话流程分析')} value="对话流程分析">
                                对话流程分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('知识点数量分析')} value="知识点数量分析">
                                知识点数量分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('多轮对话总体情况分析')} value="多轮对话总体情况分析">
                                多轮对话总体情况分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('多轮对话失败原因分析')} value="多轮对话失败原因分析">
                                多轮对话失败原因分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('问答任务情况分析')} value="问答任务情况分析">
                                问答任务情况分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('未知问题分析')} value="未知问题分析">
                                未知问题分析
                              </Checkbox>
                            </Col>
                          </Row>
                          <Row
                            style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                            gutter={20}
                          >
                            <Col span={19}></Col>
                            <Col span={5}>
                              <Checkbox disabled={this.panduan('未知问题知识点聚合分析')} value="未知问题知识点聚合分析">
                                未知问题知识点聚合分析
                              </Checkbox>
                            </Col>
                          </Row>
                        </Col>
                      </Row>
                    </CheckboxGroup>
                  </Col>
                </Row>
              </FormItem>
            </Form>
            <div className={styles.flex}>
              <div>
                {/*<img  src={qxbuttom} style={{ marginRight: 50 }} />*/}
                <img onClick={this.operation} src={qdbuttom} />
              </div>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(AddEditUser));
